<!--
 * @Autor: Ruohong Yu
 * @Date: 2023-04-03 20:46:45
 * @Description: file content
 * @FilePath: \ebook\src\components\login\ForPassword.vue
-->
<template>
  <div class="login">
    <div class="bg-setting"></div>
    <div class="login-wrapper">
      <!-- 左侧的注册盒子 -->
      <div class="login-left">
        <div class="title">Ybook Reader</div>
        <div class="emailbox">
          <div class="emailicon icon"></div>
          <input class="user" id="email"  v-model="email" @blur="emailUsed" placeholder="邮箱">
          <div class="error_tip ema_tip" v-show="emailError">{{emailErrorText}}</div>
        </div>
        <div class="pwdbox">
          <div class="emailicon icon"></div>
          <input class="pwd" v-model="emailcode" @blur="emailcodeUsed" placeholder="邮箱验证码">
          <div class="code-btn" v-show="show" @click="sendEmail">
            获取验证码
          </div>
          <div class="code-btn notclick" v-show="!show">
            {{count}}s后重新获取
          </div>
          <div class="error_tip code_tip" v-show="emailcodeError">{{emailcodeErrorText}}</div>
        </div>
        <div class="pwdbox">
          <div class="pswicon icon"></div>
          <input  class="pwd" v-model="password" @blur="pwdUsed" type="password"  placeholder="密码">
          <div class="error_tip pwd_tip" v-show="pwdError">{{pwdErrorText}}</div>
        </div>
        <div class="pwdbox">
          <div class="pswicon icon"></div>
          <input  class="pwd"  v-model="repassword" @blur="repwdUsed" type="password"  placeholder="确认密码">
          <div class="error_tip repwd_tip" v-show="pwdError">{{repwdErrorText}}</div>
        </div>
        <div class="log-box">
          <button type="primary" class="login_btn" @click="back">返回登录</button>
          <button type="primary" class="login_btn" @click="pwdmodify">重置密码</button>
        </div>
      </div>
      <!-- 右侧的注册盒子 -->
      <div class="login-right">
        <div class="title">Welcome To Ybook Reader</div>
      </div>
    </div>
    <toast :text="toastText" ref="toast"></toast>
  </div>
</template>

<script>
import { modifyPwd, sendEmailCode } from '@/api/user'
import Toast from '../common/Toast.vue'
import crypto from '@/utils/crypto'
export default ({
  components: { Toast },
  data () {
    return {
      email: '',
      password: '',
      repassword: '',
      emailcode: '',
      pwdError: false,
      pwdErrorText: '',
      repwdError: false,
      repwdErrorText: '',
      emailError: false,
      emailErrorText: '',
      emailcodeError: false,
      emailcodeErrorText: '',
      show: true,
      count: '',
      timer: null,
      toastText: ''
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    sendEmail () {
      this.emailUsed()
      if (!this.emailError) {
        sendEmailCode(this.email).then((res) => {
          if (res.data.status === 0) {
            const TIME_COUNT = 60
            if (!this.timer) {
              this.count = TIME_COUNT
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          }
        })
      }
    },
    emailcodeUsed () {
      if (!/^[A-Za-z0-9]+$/.test(this.emailcode)) {
        this.emailcodeErrorText = '*验证码由数字英文组成'
        this.emailcodeError = true
      } else {
        this.emailcodeError = false
      }
    },
    pwdUsed () {
      if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/.test(this.password)) {
        this.pwdErrorText = '*密码需包含大小写字母和数字，长度在8-20之间'
        this.pwdError = true
      } else {
        this.pwdError = false
      }
    },
    repwdUsed () {
      if (this.password !== this.repassword) {
        this.repwdErrorText = '*重复密码必须和密码相同'
        this.repwdError = true
      } else {
        this.repwdError = false
      }
    },
    emailUsed () {
      if (!/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(this.email)) {
        this.emailErrorText = '*请输入有效邮箱'
        this.emailError = true
      } else {
        this.emailError = false
      }
    },
    pwdmodify () {
      this.emailcodeUsed()
      this.pwdUsed()
      this.repwdUsed()
      if (!this.pwdError && !this.repwdError && !this.emailcodeError) {
        const pwd = crypto.Encrypt(this.password)
        modifyPwd(this.email, this.emailcode, pwd).then((res) => {
          if (res.data.status === 0) {
            this.toastText = '重置成功'
            this.$refs.toast.updateText('重置成功')
            this.$refs.toast.show()
          } else if (res.data.status === 2) {
            this.emailcodeErrorText = '*验证码不正确'
            this.emailcodeError = true
          } else if (res.data.status === 3) {
            this.emailErrorText = '*用户不存在'
            this.emailError = true
          } else {
            this.toastText = '重置失败'
            this.$refs.toast.updateText('重置失败')
            this.$refs.toast.show()
          }
        })
      }
    }
  }
})
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 768px){
  .login{
    background-image:url('../../assets/images/loginbg.png');
    width: 100%;
    height: 100%;
    .bg-setting{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0b5137d8;
    }
    .login-wrapper{
      display:flex;
      position:absolute;
      width:px2rem(700);
      height:px2rem(400);
      border-radius: 12px;
      overflow: hidden;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 12px 16px 0  rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D;
      .login-left{
        position: relative;
        background-color:#fff;
        width:px2rem(220);
        .title{
          position: absolute;
          top: px2rem(40);
          left: px2rem(30);
          width: 100%;
          font-size: px2rem(20);
          background-image: -webkit-linear-gradient(right bottom, #3D867F, #67B9C1, #FD4804);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        input{
          outline-style: none ;
          border: 0;
          border-bottom:1px solid #E9E9E9;
          border-radius: px2rem(5);
          background-color:#F8F8F8;
          padding-left: px2rem(2);
          height:px2rem(20);
          width: 100%;
          font-family:sans-serif;
          font-size:px2rem(10);
          color:#89AB9E;
        }
        input::-webkit-input-placeholder{
            color:#0b5137;
        }
        input:focus{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:hover{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:-webkit-autofill {
          /* 修改默认背景框的颜色 */
          box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
          /* 修改默认字体的颜色 */
          -webkit-text-fill-color: #445b53;
        }
        input:-webkit-autofill::first-line {
          /* 修改默认字体的大小 */
          font-size: px2rem(10);
          /* 修改默认字体的样式 */
          font-weight:bold;
        }
        .icon{
          display:inline-block;
          width:px2rem(15);
          height:px2rem(15);
          margin-right: px2rem(5);
          margin-left: px2rem(5);
          margin-top: px2rem(5);
        }
        .pswicon{
          background:url('../../assets/images/password.png') no-repeat center;
          background-size:contain;
        }
        .emailicon{
          background:url('../../assets/images/email.png') no-repeat center;
          background-size:contain;
        }
        .error_tip{
          position: absolute;
          left: px2rem(24);
          color: rgb(156, 0, 0);
          width: px2rem(150);
          font-size: px2rem(8);
        }
        .ema_tip{
          top: px2rem(145);
        }
        .code_tip{
          top: px2rem(190);
        }
        .pwd_tip{
          top: px2rem(233);
        }
        .repwd_tip{
          top: px2rem(280);
        }
        .pwdbox{
          height:px2rem(30);
          width:100%;
          display: flex;
          margin-top: px2rem(15);
          .code-btn{
            cursor: pointer;
            font-size: px2rem(10);
            background-color: #5F8276;
            width: px2rem(110);
            height: px2rem(20);
            line-height: px2rem(20);
            margin: 0 px2rem(5);
            text-align: center;
            border-radius: 3px;
            color: #fff;
          }
          .notclick{
            cursor: not-allowed;
            pointer-events: none;
            background-color: #5f8276cc;
          }
        }
        .emailbox{
          margin-top:px2rem(120);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .log-box{
          font-size:px2rem(12);
          display: flex;
          justify-content: space-between ;
          width:100%;
          margin-top: px2rem(25);
          color:#4E655D;
          .login_btn{
            flex: 1;
            margin: 0 px2rem(8);
            background-color: #5f8276;
            border: none;
            color: #FAFAFA;
            padding: px2rem(5);
            text-align: center;
            text-decoration: none;
            font-size: px2rem(13);
            border-radius: px2rem(12);
            outline:none;
            &:hover{
              box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
              cursor: pointer;
              background-color: #0b5137;
              transition: all 0.2s ease-in;
            }
          }
        }
      }
      .login-right{
        width:px2rem(500);
        background-image:url('../../assets/images/loginbg.png');
        background-size:cover;
        font-family:sans-serif;
        .title{
          color: #fff;
          margin-top:px2rem(320);
          margin-left: px2rem(20);
          font-weight:bold;
          font-size:px2rem(20);
        }
        .title:hover{
          font-size:px2rem(21);
          transition: all 0.4s ease-in-out;
          cursor: pointer;
        }
      }
    }
  }
}

@media only screen and (max-width: 767px){
  .login{
    background-image:url('../../assets/images/loginbg.png');
    width: 100%;
    height: 100%;
    .bg-setting{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0b5137d8;
    }
    .login-wrapper{
      display:flex;
      position:absolute;
      width:80%;
      height:px2rem(400);
      border-radius: 12px;
      overflow: hidden;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 12px 16px 0  rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D;
      .login-left{
        position: relative;
        background-color:#fff;
        width:100%;
        .title{
          position: absolute;
          top: px2rem(40);
          left: px2rem(85);
          width: 100%;
          font-size: px2rem(20);
          background-image: -webkit-linear-gradient(right bottom, #3D867F, #67B9C1, #FD4804);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        input{
          outline-style: none ;
          border: 0;
          border-bottom:1px solid #E9E9E9;
          border-radius: px2rem(5);
          background-color:#F8F8F8;
          padding-left: px2rem(2);
          height:px2rem(20);
          width: 100%;
          font-family:sans-serif;
          font-size:px2rem(10);
          color:#89AB9E;
        }
        input::-webkit-input-placeholder{
            color:#0b5137;
        }
        input:focus{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:hover{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:-webkit-autofill {
          /* 修改默认背景框的颜色 */
          box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
          /* 修改默认字体的颜色 */
          -webkit-text-fill-color: #445b53;
        }
        input:-webkit-autofill::first-line {
          /* 修改默认字体的大小 */
          font-size: px2rem(10);
          /* 修改默认字体的样式 */
          font-weight:bold;
        }
        .icon{
          display:inline-block;
          width:px2rem(15);
          height:px2rem(15);
          margin-right: px2rem(5);
          margin-left: px2rem(5);
          margin-top: px2rem(5);
        }
        .pswicon{
          background:url('../../assets/images/password.png') no-repeat center;
          background-size:contain;
        }
        .emailicon{
          background:url('../../assets/images/email.png') no-repeat center;
          background-size:contain;
        }
        .error_tip{
          position: absolute;
          left: px2rem(24);
          color: rgb(156, 0, 0);
          width: 90%;
          font-size: px2rem(8);
        }
        .ema_tip{
          top: px2rem(145);
        }
        .code_tip{
          top: px2rem(190);
        }
        .pwd_tip{
          top: px2rem(233);
        }
        .repwd_tip{
          top: px2rem(280);
        }
        .pwdbox{
          height:px2rem(30);
          width:100%;
          display: flex;
          margin-top: px2rem(15);
          .code-btn{
            cursor: pointer;
            font-size: px2rem(10);
            background-color: #5F8276;
            width: px2rem(130);
            height: px2rem(20);
            line-height: px2rem(20);
            margin: 0 px2rem(5);
            text-align: center;
            border-radius: 3px;
            color: #fff;
          }
          .notclick{
            cursor: not-allowed;
            pointer-events: none;
            background-color: #5f8276cc;
          }
        }
        .emailbox{
          margin-top:px2rem(120);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .log-box{
          font-size:px2rem(12);
          display: flex;
          justify-content: space-between ;
          width:100%;
          margin-top: px2rem(25);
          color:#4E655D;
          .login_btn{
            flex: 1;
            margin: 0 px2rem(8);
            background-color: #5f8276;
            border: none;
            color: #FAFAFA;
            padding: px2rem(5);
            text-align: center;
            text-decoration: none;
            font-size: px2rem(13);
            border-radius: px2rem(12);
            outline:none;
            &:hover{
              box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
              cursor: pointer;
              background-color: #0b5137;
              transition: all 0.2s ease-in;
            }
          }
        }
      }
      .login-right{
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        display:none;
        position:absolute;
        z-index:-1000;
        transform:scaleY(0);
      }
    }
  }
}
</style>
